import React, { Component } from "react";

export default class FormCom extends Component {
  render() {
    return (
      <div>
        <h2>登录</h2>
        <form action="">
          <hr />
          用户名: <input ref={(el) => (this.user = el)} type="text" />
          <br />
          密码: <input ref={(el) => (this.pass = el)} type="text" />
          <br />
          <hr />
          <button onClick={this.login}>登录</button>
          <button type="button" onClick={this.reset}>重置</button>
        </form>
      </div>
    );
  }

  //登录的单击事件
  login = (e) => {
    //阻止默认行为  建议: 往前写
    e.preventDefault();
    //获取用户名
    let username = this.user.value;
    let password = this.pass.value;
    //输出
    console.log(`用户名为: ${username} , 密码为: ${password}`);
  };

  //表单重置
  reset = () => {
    this.user.value = '';
    this.pass.value = ''
  }

}
